import { Splitter } from "antd";
import { useEffect, useMemo, useRef, useState } from "react";
import microApp from '@micro-zoe/micro-app'

import { useRouter, useSearchParams } from "@/router/hooks";
import { useUserToken } from "@/store/userStore";
import { useMenuActions, useSkipDirect } from '../../store/menuStore';
import MicroLeftWrapper from "./modules/MicroLeftWrapper";
import MicroRightWrapper from "./modules/MicroRightWrapper";
import { CircleLoading } from "@/components/loading";
import styled from "styled-components";
const MicroHome = () => {
  const searchParams = useSearchParams()
  const integratedRef = useRef()
  const [rightShow, setRightShow] = useState(true)
  const [screenData, setScreenData] = useState()
  const [panelSize, setPanelSize] = useState('50%')
  const [isPending, setIsPending] = useState(true)
  const router = useRouter()


  const { getContainerMenus, findByCodeMenu, selectedByCode, setMenuReady } = useMenuActions()

  const menusChange = (menus) => {
    console.log(menus)
    let rightMicroApp;
    let menuUrl = searchParams.get('menuUrl')
    // let menuCode = searchParams.get('menuCode')
    searchParams.forEach((value, key) => {
      if (key.includes('micro-app--')) {
        rightMicroApp = key.replace('micro-app--', '')
      }
    })

    if (!rightMicroApp && !menuUrl && menus.length) {
      router.push(`/integration/micro?menuCode=${menus[0].code}&menuName=${menus[0].name}`)
    }
  }

  const initMicro = () => {
    searchParams.forEach((value, key) => {
      if (key.includes('micro-app--')) {
        setRightShow(true)
        setPanelSize('50%')
      }
    })

    microApp.addDataListener('micro-large-screen', (data) => {
      console.log('来自子应用my-app的数据', data)
      if (data?.screenData) {
        integratedRef.current.setMicroApp(data.screenData)
        // setRightShow(true)
        // setPanelSize('50%')
      } else if (data?.sendMessage) {
        if (!data.sendMessage.target || data.sendMessage.target === 'all') {
          microApp.getActiveApps().forEach(d => {
            console.log(d)
            microApp.forceSetData(d, data, () => {
              console.log('发送到 ' + d, '数据已经发送完成')
            })
          })

        } else {
          microApp.forceSetData('micro-app--' + data.sendMessage.target, data, () => {
            console.log('发送到 ' + data.sendMessage.target, '数据已经发送完成')
          })
        }
      }

      return '返回值1'
    })
  }
  const initData = () => {
    getContainerMenus(searchParams.get('appType') || 1).then(res => {
      menusChange(res)
      setIsPending(false)
    })
  }

  useEffect(() => {
    initData()
    initMicro()
    return () => {
      microApp.removeDataListener('micro-large-screen')
    }
  }, [])

  if (isPending) {
    return <CircleLoading target="parent" />
  }

  return <StyleWrap>
    <MicroLeftWrapper onRouter={(data) => {
      integratedRef.current.setMicroApp(data)
    }} />
    <MicroRightWrapper ref={integratedRef} onClose={() => {
      setRightShow(false)
      setPanelSize('100%')
    }} />
  </StyleWrap>;
}

const StyleWrap = styled.div`
  height: 100vh;
  display: flex;
  overflow: hidden;
`

export default MicroHome;